<template>
  <div class="main" style="font-size: 12px">
    <div class="header">
      <div class="search">
        <el-input
          style="width: 300px"
          size="small"
          placeholder="请输入损坏单名"
          v-model="params.name"
        >
          <template slot="prepend">名称</template>
        </el-input>
        <el-select
          v-model="params.warehouseId"
          size="small"
          style="margin: 0 20px"
          placeholder="请选择仓库"
        >
          <el-option
            v-for="item in warehouseList"
            :key="item.area"
            :label="item.areaName"
            :value="item.area"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="params.time"
          size="small"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="chooseTime"
        >
        </el-date-picker>
        <el-button
          @click="searchGetChangeList"
          size="small"
          style="background-color: #409eff; color: white; margin-left: 20px"
          >查询
        </el-button>
      </div>
      <div>
        <el-button
          size="small"
          style="background-color: #409eff; color: white"
          @click="addCheck"
          v-if="authority.includes(989)"
          >新增</el-button
        >
      </div>
    </div>
    <!-- 损坏表   -->
    <div class="mainTable">
      <el-table
        :height="maxHeight + 'px'"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        v-loading="loading"
        :data="changeList.list"
        border
        style="width: 100%; font-size: 12px"
        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: '400',
          background: '#409EFF',
          color: 'white',
        }"
        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
      >
        <el-table-column
          prop="id"
          label="损坏单号"
          min-width="140px"
        ></el-table-column>
        <el-table-column
          prop="brokenCode"
          label="单名"
          min-width="140px"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          min-width="100px"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="brokenTime"
          label="损坏日期"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="areaName"
          min-width="100px"
          label="仓库"
        ></el-table-column>
        <el-table-column label="明细" min-width="650px">
          <template slot-scope="props">
            <el-table
              :data="props.row.materials"
              border
              maxHeight="300px"
              :headerCellStyle="{ textAlign: 'center', fontWeight: '400' }"
              :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
            >
              >
              <el-table-column
                prop="materialId"
                min-width="100"
                label="单品编码"
              ></el-table-column>
              <el-table-column
                prop="productName"
                min-width="150"
                label="单品名称"
              ></el-table-column>
              <el-table-column
                prop="norms"
                min-width="150"
                label="单品规格"
              ></el-table-column>
              <el-table-column
                prop="unit"
                min-width="150"
                label="单品单位"
              ></el-table-column>
              <el-table-column
                prop="color"
                min-width="150"
                label="单品颜色"
              ></el-table-column>
              <!-- <el-table-column
                prop="price"
                min-width="80"
                label="成本价"
                v-if="!rejectAccountList.includes(userName)"
              ></el-table-column> -->
              <el-table-column min-width="80" label="数量">
                <template slot-scope="props">
                  <el-link :type="props.row.count < 0 ? 'danger' : 'success'"
                    >{{ props.row.count }}
                  </el-link>
                </template>
              </el-table-column>
              <!-- <el-table-column
                prop="totalPrice"
                width="100"
                label="价格"
                v-if="!rejectAccountList.includes(userName)"
              ></el-table-column> -->
            </el-table>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="sumXPrice"
          label="价格总计"
          v-if="!rejectAccountList.includes(userName)"
          min-width="100"
        ></el-table-column> -->
        <!-- 0是未审批 1是通过 2是驳回 -->
        <el-table-column label="状态" min-width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="danger" size="mini"
              >待处理</el-tag
            >
            <el-tag size="mini" v-if="scope.row.status == 1" type="success"
              >已通过</el-tag
            >
            <el-tag size="mini" v-if="scope.row.status == 2" type="info"
              >已驳回</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="voucher" label="凭证" min-width="80px">
          <template slot-scope="scope">
            <el-image
              v-for="(v, i) in scope.row.changeVouchersList"
              :key="i"
              style="width: 50px; height: 50px"
              ref="preview"
              :src="v"
              :preview-src-list="v"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          label="原因"
          min-width="200"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="200"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="110">
          <template slot-scope="data">
            <!-- <div>
              <el-link
                style="color: #ff6a00"
                @click="changeProcureInfo(data.row)"
                >变更明细</el-link
              >
            </div> -->
            <div>
              <el-link
                type="success"
                @click="updateStatus(true, data.row)"
                v-if="authority.includes(993) && data.row.status != 1"
                style="margin-right: 10px"
                >通过</el-link
              >
              <el-link
                type="danger"
                style="margin-right: 5px"
                @click="updateStatus(false, data.row)"
                v-if="authority.includes(993) && data.row.status == 0"
                >驳回
              </el-link>
              <!-- 未审批和驳回可以编辑 -->
              <el-link
                type="primary"
                style="margin-right: 10px"
                @click="editShow(data.row)"
                v-if="authority.includes(992) && data.row.status != 1"
                >编辑
              </el-link>
              <el-link
                type="danger"
                style="margin-right: 10px"
                v-if="authority.includes(990)"
                @click="deleteCol(data.row)"
                >删除
              </el-link>
              <el-link
                type="primary"
                style="margin-right: 10px"
                v-if="authority.includes(991) && data.row.status != 1"
                @click="opVouchers(data.row)"
                >修改凭证
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        align="right"
        @size-change="handleCheckSizeChange"
        @current-change="handleCheckCurrentChange"
        :current-page="changeList.currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="changeList.count"
      >
      </el-pagination>
    </div>
    <!-- 新增/修改 -->
    <el-dialog
      :title="editDetails ? '修改损坏单' : '新增损坏单'"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <div style="" class="createInfo">
        <div>
          <div>名称</div>
          <el-input
            placeholder="请输入损坏单名"
            v-model="createdInfo.name"
            clearable
            :disabled="editDetails"
          >
          </el-input>
        </div>
        <div>
          <div>仓库</div>
          <el-select
            v-model="createdInfo.warehouseId"
            clearable
            style="width: 100%"
            placeholder="请选择仓库"
            :disabled="editDetails"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.area"
              :label="item.areaName"
              :value="item.area"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <div>损坏日期</div>
          <el-date-picker
            style="width: 100%"
            v-model="createdInfo.time"
            type="date"
            placeholder="选择日期"
            :disabled="editDetails"
          >
          </el-date-picker>
        </div>
        <div>
          <div>原因</div>
          <el-input
            placeholder="请输入损坏原因"
            v-model="createdInfo.reason"
            clearable
            :disabled="editDetails"
          >
          </el-input>
        </div>
        <div>
          <div>备注</div>
          <el-input
            placeholder="请输入备注"
            rows="8"
            type="textarea"
            v-model="createdInfo.remark"
            :disabled="editDetails"
          >
          </el-input>
        </div>
        <!-- <div>
          <div>凭证</div>
          <div>
            <rayUpload @url="getImageUrl"></rayUpload>
          </div>
        </div> -->
        <div style="display: flex; align-items: center; margin-bottom: 50px">
          凭证
          <div>
            <span style="color: gray; font-size: 12px" v-show="!editDetails"
              >(粘贴复制即可上传图片)</span
            >

            <div class="div" style="display: flex; align-items: center">
              <div
                v-for="(v, i) in changeVouchers"
                style="display: flex; align-items: center; margin-right: 10px"
                :key="i"
              >
                <el-image
                  v-if="v"
                  :key="i"
                  style="width: 50px; height: 50px"
                  ref="preview"
                  :src="host + v"
                  :preview-src-list="[host + v]"
                >
                </el-image>
                <div @click="deleteImgVouchers(i)" v-show="!editDetails">
                  <el-icon name="delete"></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div style="margin-bottom: 10px">
          <span style="color: red">*</span>请选择先选择损坏仓库
        </div>
        <!-- <div style="margin: 10px 0; width: 50%">
          <el-input
            placeholder="请搜索单品名称"
            v-model="createdInfo.searchMaterialkey"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div> -->
        <!-- v-loading="loading" -->
        <el-table
          :height="300"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          :data="materialList"
          border
          style="width: 100%"
          :headerCellStyle="{
            textAlign: 'center',
            fontWeight: '400',
            background: '#409EFF',
            color: 'white',
          }"
          :cellStyle="{ textAlign: 'center', fontSize: '12px' }"
        >
          <el-table-column
            prop="materialId"
            label="材料编码"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="productName"
            label="材料名称"
            min-width="280"
          ></el-table-column>
          <el-table-column
            prop="norms"
            label="规格"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="color"
            label="颜色"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            min-width="100"
          ></el-table-column>
          <!-- <el-table-column prop="material.price" label="成本价" min-width="100"
                           v-if="!rejectAccountList.includes(userName)"></el-table-column>
          <el-table-column prop="material.salePrice" label="销售价" min-width="100"
                           v-if="!rejectAccountList.includes(userName)"></el-table-column> -->
          <el-table-column label="数量" min-width="200">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model.trim="scope.row.count"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisibleHandler"
          :loading="isloading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <changeBox
      @close="changeBoxClose"
      apiName="changeSelectChangeDetailList"
      v-if="changeBoxStatus"
      :targetId="targetId"
    >
    </changeBox>
    <el-dialog
      :visible.sync="editVouchers"
      :before-close="handleClose"
      width="30%"
      center
    >
      <div style="display: flex; align-items: center; margin-bottom: 50px">
        修改凭证
        <div>
          <span style="color: gray; font-size: 12px"
            >(粘贴复制即可上传图片)</span
          >
          <div class="div" style="display: flex; align-items: center">
            <div
              v-for="(v, i) in editImg"
              style="display: flex; align-items: center; margin-right: 10px"
            >
              <el-image
                :key="i"
                style="width: 50px; height: 50px"
                ref="preview"
                :src="host + v"
                :preview-src-list="[host + v]"
              >
              </el-image>
              <div @click="deleteImg(i)">
                <el-icon name="delete"></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVouchers = false">取 消</el-button>
        <el-button
          style="background: #409eff; color: whitesmoke"
          @click="changeImg"
          :loading="isloading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import Decimal from 'decimal.js'
import changeBox from '@/RayComponents/materialChange.vue'

import rayUpload from '@/RayComponents/rayUpload.vue'

import quinn from '@/utils/quinn'
import axios from 'axios'

export default {
  name: 'damageList',
  components: {
    rayUpload,
    changeBox,
  },
  data() {
    return {
      isloading: false,
      authority: this.$quinn.getStorage('userData').authority || [],
      apiName: 'classificationMaterialList',
      changeVouchersList: [],
      changeVouchers: [],
      rejectAccountList: [
        '宁乡仓负责人',
        '广东仓负责人',
        '云南仓负责人',
        '贵州仓负责人',
        '河南仓负责人',
        '重庆仓负责人',
        '西安仓负责人',
      ],
      targetId: '',
      changeBoxStatus: false,
      loading: false,
      editVouchers: false,
      editImgId: 0,
      editDetails: false,
      editDetailsInfo: null, //编辑损坏单回显
      warehouseList: [],
      editImg: [],
      editImgList: [],
      host: this.$imgHost,
      dialogVisible: false,
      userName: '',
      params: {
        name: '',
        startTime: '',
        endTime: '',
        warehouseId: '',
      },
      createdInfo: {
        time: '',
        warehouseId: '',
        name: '',
        remark: '',
        reason: '',
        changeVouchers: '',
        searchMaterialkey: '', //搜索单品名称关键词
      },
      changeList: {
        list: [],
        count: 100,
        currentPage: 1,
        pageSize: 20,
        pageNumber: 1,
      },
      materialList: [],
      maxHeight: 0,
    }
  },
  mounted() {
    this.userName = quinn.getStorage('userData').userName
    this.$nextTick(() => {
      this.maxHeight = window.innerHeight - 240
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 240
      })
    }
  },
  watch: {
    '$store.state.areaList': {
      handler(newVal) {
        this.warehouseList = newVal
      },
      deep: true,
      immediate: true,
    },
    'createdInfo.warehouseId': {
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.getMaterialList()
        }
      },
      deep: true,
      immediate: true,
    },
    'createdInfo.searchMaterialkey': {
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.getMaterialList()
        }
      },
      deep: true,
      immediate: true,
    },
    changeVouchers: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          this.createdInfo.changeVouchers = newVal.join(',')
        } else {
          this.createdInfo.changeVouchers = ''
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getChangeList()
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    deleteCol(info) {
      this.$alert(`确定删除ID为:${info.id}损坏单?`, '提示', {
        confirmButtonText: '确定',
        callback: (res) => {
          if (res === 'confirm') {
            this.$api
              .brokenDeleteBroken({
                brokenId: info.id,
              })
              .then((res) => {
                this.$message({ message: '删除成功！', type: 'success' })
                this.getChangeList()
              })
          }
        },
      })
    },
    editShow(info) {
      this.dialogVisible = true
      this.editDetails = true
      this.editDetailsInfo = info
      this.createdInfo.name = info.brokenCode
      this.createdInfo.remark = info.remark
      this.createdInfo.reason = info.reason
      this.createdInfo.remark = info.remark
      this.createdInfo.warehouseId = info.areaId
      this.createdInfo.time = info.brokenTime

      this.changeVouchers = info.changeVouchers
      this.changeVouchersList = info.changeVouchersList
    },
    handlePaste(event) {
      // 只能编辑损坏明细
      if (this.editDetails) return
      if (!this.editVouchers && !this.dialogVisible) return
      const clipboardData = event.clipboardData || window.clipboardData
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i]

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile()
            if (file) {
              this.uploadImage(file)
            }
          } else {
            this.$message.error('请拷贝图片!')
            break
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData()
      formData.append('file', imageFile)
      axios
        .post(`${this.$apiHost}/common/fileImgUrl`, formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            token: window.$quinn.getStorage('token'),
          },
        })
        .then((response) => {
          if (this.dialogVisible) {
            // 上传新增报销凭证
            this.changeVouchers.push(response.data.result[0])
            // this.changeVouchersList.push('https://' + response.data.result[0]);
          }
          if (this.editVouchers) {
            // 上传修改凭证
            this.editImg.push(response.data.result[0])
            // this.editImgList.push('https://' + response.data.result[0]);
          }
        })
        .catch((error) => {})
    },
    changeBoxClose(e) {
      this.changeBoxStatus = e
    },
    changeProcureInfo(info) {
      this.targetId = info.changeId
      this.changeBoxStatus = true
    },
    chooseTime(e) {
      this.params.startTime = dayjs(e[0]).format('YYYY-MM-DD')
      this.params.endTime = dayjs(e[1]).format('YYYY-MM-DD')
    },
    getChangeList() {
      this.loading = true
      this.$api
        .brokenGetBrokenList({
          pageSize: this.changeList.pageSize,
          pageNumber: this.changeList.pageNumber,
          brokenCode: this.params.name,
          startTime: this.params.startTime,
          endTime: this.params.endTime,
          areaId: this.params.warehouseId,
        })
        .then((res) => {
          this.loading = false
          this.changeList.count = res.total
          res.data.map((el) => {
            // el.changeDetailList.map(k => {
            //   k.totalPrice = Decimal(k.price).mul(Decimal(k.count)).toNumber();
            // })
            if (el.voucher) {
              el.changeVouchers = el.voucher.split(',')
              el.changeVouchersList = []
              el.changeVouchers.map((k) => {
                el.changeVouchersList.push(this.$imgHost + k)
              })
            } else {
              el.changeVouchersList = []
              el.changeVouchers = []
            }
          })
          this.changeList.list = res.data
        })
    },
    getImageUrl(e) {
      this.createdInfo.changeVouchers = e
    },
    echoMaterialList() {
      this.materialList.forEach((v) => {
        this.editDetailsInfo.materials.forEach((j) => {
          // v.productName === j.productName && v.productCode === j.productCode && v.norms === j.norms
          if (v.materialId === j.materialId) {
            v.count = j.count
            // this.allCount = new Decimal(0)
          }
        })
      })
    },
    getMaterialList() {
      this.$api
        .brokenGetBrokenDetailList({
          productName: this.createdInfo.searchMaterialkey,
          areaId: this.createdInfo.warehouseId,
        })
        .then((res) => {
          if (res.length) {
            res.map((el) => {
              el.count = 0
            })
            this.materialList = res
            if (this.editDetails) {
              // 编辑损坏单回显
              this.editDetailsInfo && this.echoMaterialList()
            }
          }
        })
    },
    addCheck() {
      this.dialogVisible = true
    },
    handleCheckSizeChange(e) {
      this.changeList.pageSize = e
      this.getChangeList()
    },
    handleCheckCurrentChange(e) {
      this.changeList.pageNumber = e
      this.getChangeList()
    },
    handleClose() {
      this.editDetails = false
      this.editVouchers = false
      this.dialogVisible = false
      this.isloading = false
      this.createdInfo.time = ''
      this.createdInfo.reason = ''
      this.createdInfo.remark = ''
      this.createdInfo.name = ''
      this.createdInfo.warehouseId = ''
      this.createdInfo.searchMaterialkey = ''
      this.createdInfo.changeVouchers = ''
      this.changeVouchers = []
      this.changeVouchersList = []
      this.editImg = []
      this.editImgList = []
      this.materialList = []
      this.editDetailsInfo = []
    },
    updateStatus(type, info) {
      // if (info.status !== 0) {
      //   this.$message.error('当前损坏单已处理!');
      //   return;
      // }
      if (type) {
        // 通过
        this.$alert(`确定通过ID为:${info.id}损坏单?`, '提示', {
          confirmButtonText: '确定',
          callback: (res) => {
            if (res === 'confirm') {
              this.$api
                .brokenPassBroken({
                  brokenId: info.id,
                })
                .then((res) => {
                  this.$message({ message: '通过成功！', type: 'success' })
                  this.getChangeList()
                })
            }
          },
        })
      } else {
        //驳回
        this.$alert(`确定驳回ID为:${info.id}损坏单?`, '提示', {
          confirmButtonText: '确定',
          callback: (res) => {
            if (res === 'confirm') {
              this.$api
                .brokenRejectBroken({
                  brokenId: info.id,
                })
                .then((res) => {
                  this.$message({ message: '驳回成功！', type: 'success' })
                  this.getChangeList()
                })
            }
          },
        })
      }
    },
    searchGetChangeList() {
      this.changeList.pageNumber = 1
      this.getChangeList()
    },
    dialogVisibleHandler() {
      if (this.editDetails) {
        // 修改损坏单明细
        this.editDetailsConfirm()
      } else {
        // 新增损坏单
        this.addCheckConfirm()
      }
    },
    editDetailsConfirm() {
      let list = []
      this.materialList.map((el) => {
        if (el.count !== 0 && el.count !== '') {
          list = list.concat(el)
        }
      })

      if (list.length == 0) {
        this.$message.error('请添加损坏材料!')
        return
      }
      this.isloading = true
      this.$api
        .brokenUpdateBroken({
          id: this.editDetailsInfo.id,
          materials: list,
        })
        .then((res) => {
          if (res) {
            this.$message({ message: '修改成功！', type: 'success' })
            this.createdInfo.time = ''
            this.createdInfo.reason = ''
            this.createdInfo.remark = ''
            this.createdInfo.name = ''
            this.createdInfo.warehouseId = ''
            this.createdInfo.changeVouchers = ''
            this.changeVouchers = []
            this.changeVouchersList = []
            this.materialList = []
            this.editDetailsInfo = null
            this.editDetails = false
            this.editImgId = 0
            this.isloading = false
            // this.materialList.map(el => {
            //     el.count = 0;
            // })
            this.getChangeList()
            this.dialogVisible = false
          }
        })
    },
    addCheckConfirm() {
      let list = []
      this.materialList.map((el) => {
        if (el.count !== 0 && el.count !== '') {
          list = list.concat(el)
        }
      })

      if (list.length == 0) {
        this.$message.error('请添加损坏材料!')
        return
      }
      // for (let i in this.createdInfo) {
      //     if (this.createdInfo[i] == '') {
      //         this.$message.error('请输入损坏单信息!');
      //         return
      //     }
      // }
      this.createdInfo.time = dayjs(this.createdInfo.time).format('YYYY-MM-DD')
      this.isloading = true
      this.$api
        .brokenAddBroken({
          materials: list,
          brokenTime: this.createdInfo.time,
          reason: this.createdInfo.reason,
          remark: this.createdInfo.remark,
          brokenCode: this.createdInfo.name,
          areaId: this.createdInfo.warehouseId,
          voucher: this.createdInfo.changeVouchers,
          // addType: 'damage' // 损坏记录
        })
        .then((res) => {
          this.$message({ message: '添加成功！', type: 'success' })
          this.createdInfo.time = ''
          this.createdInfo.reason = ''
          this.createdInfo.remark = ''
          this.createdInfo.name = ''
          this.createdInfo.warehouseId = ''
          this.createdInfo.changeVouchers = ''
          this.changeVouchers = []
          this.changeVouchersList = []
          this.materialList = []
          this.isloading = false
          // this.materialList.map(el => {
          //     el.count = 0;
          // })
          this.getChangeList()
          this.dialogVisible = false
        })
    },
    opVouchers(row) {
      console.log(row)
      this.editVouchers = true
      this.editImgId = row.id
      this.editImg = row.changeVouchers
      this.editImgList = row.changeVouchersList
    },
    deleteImg(i) {
      if (this.editImg.length <= 1) {
        return this.$message.error('至少保留一张!')
      }
      this.editImg.splice(i, 1)
    },
    deleteImgVouchers(i) {
      this.changeVouchers.splice(i, 1)
    },
    changeImg() {
      const data = {
        voucher: this.editImg.toString(),
        id: this.editImgId,
      }
      this.isloading = true
      this.$api.brokenUpdateBroken(data).then((res) => {
        this.$message({ message: '操作成功！', type: 'success' })
        this.editVouchers = false
        this.editImgId = 0
        this.editImg = []
        this.editImgList = []
        this.isloading = false

        this.getChangeList()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.search {
  display: flex;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mainTable {
  margin: 10px 0;
}

.flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.default /deep/ .el-button {
  border-color: #409eff;
  background-color: #409eff;
}

.default /deep/ .el-button:hover {
  color: white;
  border-color: #9dcdfa;
  background-color: #9dcdfa;
}

/deep/ .el-button:hover {
  color: black;
  border-color: #dcdfe6;
  background-color: white;
}

span /deep/ .el-button:nth-child(2) {
  border-color: #409eff;
  background-color: #409eff;
}

span /deep/ .el-button:nth-child(2):hover {
  color: white;
  border-color: #9dcdfa;
  background-color: #9dcdfa;
}

.createInfo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.createInfo > div > div:nth-child(1) {
  margin-bottom: 10px;
}

// .main /deep/ .el-select:hover{
//   border-color:#ff6a00 !important;
// }
//  /deep/ .el-input__inner{
//   border-color: #ff6a00 !important;
// }
/deep/ .el-input__inner:hover {
  border-color: #409eff !important;
}

/deep/ .el-input__inner:focus {
  border-color: #409eff !important;
}

/deep/ .selected {
  color: #409eff !important;
}

/deep/ .active {
  color: #409eff !important;
}

/deep/ .selected {
  color: #409eff !important;
}

/deep/ .el-loading-text {
  color: #409eff !important;
}

/deep/ .el-icon-loading {
  color: #409eff !important;
}
</style>
